import './App.scss';
import React, { Component } from 'react'
import Header from './components/Header'
import Main from './components/Main'
import Footer from "./components/Footer"
import axios from 'axios'
import Bscroll from 'better-scroll'

export class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tablist: [],
      active: 0,
    }
  }
  componentDidMount() {
    axios.get("/tablist").then(res => {
      this.setState({
        tablist: res.data
      }, () => {
        this.bs = new Bscroll(".scrollBox")
      })
    })
  }
  componentWillUnmount() {
    this.bs.destroy();
  }
  change(index) {
    this.setState({
      active: index
    })
  }
  render() {
    const { tablist, active } = this.state;
    return (
      <div className='appBox'>
        <Header tablist={tablist} active={active} change={this.change.bind(this)}></Header>
        <Main tablist={tablist} active={active}></Main>
        <Footer></Footer>
      </div>
    )
  }
}

export default App
